<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <link rel="stylesheet" href="/admin/fonts/iconfont.css">
  <link rel="stylesheet" href="/admin/lib/layui/css/layui.css" />
  <style>
    body .demo-class .layui-layer-title {
      background: #43eaff;
    }

    body .demo-class .layui-layer-content {
      background: #43eaff;
      font-size: 20px;
    }

    body .demo-class .layui-layer-btn {
      background-color: aquamarine;

    }

    .space_slide {
      margin: 10px 20px 30px 20px;
    }

    #uploadBox {
      width: 500px;
      display: none;
      height:700px;
    }

    .layui-btn-group .layui-btn {
      margin-right: 20px !important;
    }

    .layui-input {
      width: 330px;
    }

    .wang {
      margin-left: 110px;
    }

    body .skintest {
      width: 250px;
      height: 150px;
      background-color: antiquewhite;
      /* background: url(../../static/admin/images/人脸对比.webp) no-repeat; */

    }

    body .skintest .layui-layer-content {
      margin: 30px 0 0 30px;
      font-size: 20px;
      color: #437b83;
    }

    .layui-table-cell {
      height: 49px;
    }

    .box {
      width: 300px;
      height: 700px;
    }
  </style>
</head>

<body>
  <div class="layui-card space_slide">
    <div class="layui-card-header">
      <span class="layui-breadcrumb">
        <a href="">新闻资讯</a>
        <a href="">公司新闻</a>
        <a><cite>新闻修改</cite></a>
      </span>
    </div>
    <div class="layui-card-body">
      <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
        <ul class="layui-tab-title">
          <li class="layui-this">新闻上传</li>
          </li>
          <li>新闻内容修改</li>
        </ul>

        <div class="layui-tab-content">
          <div class="layui-tab-item layui-show">
            <div class="layui-container">
              <div class="layui-row">
                <div class="layui-col-lg8">
                  <form class="layui-form" action="">
                    <div class="layui-form-item">
                      <label class="layui-form-label">新闻名字</label>
                      <div class="layui-input-block">
                        <input type="text" name="news_name" style="width:360px;" required lay-verify="required"
                          placeholder="请输入新闻名称" autocomplete="off" class="layui-input">
                      </div>
                    </div>
                    <div class="layui-form-item">
                      <label class="layui-form-label">新闻标题</label>
                      <div class="layui-input-block">
                        <input type="text" name="news_title" style="width:360px;" required lay-verify="required"
                          placeholder="请输入新闻标题" autocomplete="off" class="layui-input">
                      </div>
                    </div>

                    <div class="layui-form-item">
                      <label class="layui-form-label">新闻模块</label>
                      <div class="layui-input-block" style="width:360px;">
                        <select name="new_id" lay-verify="required" style="width:360px;">
                          <option value="">请选择新闻分类</option>
                          <% category %>
                          <% category.forEach((item)=>{%>
                            <option value="<%= item.new_id%>"><%= item.new_name %></option>
                          <%})%>              
                        </select>
                        <!-- <input type="hidden" name="news"> -->
                      </div>
                    </div>
                    <div class="layui-form-item">
                      <div class="layui-form-item">
                        <label class="layui-form-label">发布时间</label>
                        <input type="text" class="layui-input wang" id="test1" autocomplete="off" required
                          name="news_date">
                      </div>
                    </div>
                    <div class="layui-form-item">
                      <label class="layui-form-label"></label>
                      <button type="button" class="layui-btn" id="themb">
                        <i class="layui-icon">&#xe67c;</i>缩略图</i>
                      </button>
                    </div>
                    <div class="layui-form-item">
                      <label class="layui-form-label"></label>
                      <blockquote class="layui-elem-quote" style="margin-left:110px;">预览图
                        <div>
                          <img src="" alt="" class="themb" width="150">
                          <input type="hidden" name="news_pic" class="gthemb">
                        </div>
                      </blockquote>
                    </div>
                    <!-- 多图 -->
                    <div class="layui-form-item">
                      <label class="layui-form-label"></label>
                      <div class="layui-upload">
                        <button type="button" class="layui-btn" id="pthemb">多图片上传</button>
                        <blockquote class="layui-elem-quote layui-quote-nm imgList"
                          style="margin-top: 10px; margin-left:110px;" >
                          预览图：
                         
                          <input type="hidden" name="news_img" class="imgthemb">
                        </blockquote>
                      </div>
                    </div>

                    <div class="layui-form-item layui-form-text">
                      <label class="layui-form-label">新闻内容</label>
                      <div class="layui-input-block">
                        <textarea name="news_content" placeholder="请输入新闻内容" class="layui-textarea"></textarea>
                      </div>
                    </div>
                    <div class="layui-form-item">
                      <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="formthemb">立即提交</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                      </div>
                    </div>
                  </form>
                </div>
                <div class="layui-col-lg4 box"></div>
              </div>
            </div>
          </div>

          <div class="layui-tab-item">
            <table id="news" lay-filter="test" lay-size="lg" ></table>
          </div>

        </div>
      </div>
    </div>



    <!--修改按钮 弹出层页面页面 -->
    <div id="uploadBox">
      <form class="layui-form" action="">
        <input type="hidden" name="news_id" class="oldid">   
        <div class="layui-form-item">
          <label class="layui-form-label">新闻名字</label>
          <div class="layui-input-block">
            <input type="text" name="news_name" style="width:360px;" required lay-verify="required"
              placeholder="请输入新闻名称" autocomplete="off" class="layui-input oldname">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">新闻标题</label>
          <div class="layui-input-block">
            <input type="text" name="news_title" style="width:360px;" required lay-verify="required"
              placeholder="请输入新闻标题" autocomplete="off" class="layui-input oldtitle" >
          </div>
        </div>

        <div class="layui-form-item">
          <label class="layui-form-label">新闻模块</label>
          <div class="layui-input-block" style="width:360px;">
            <select name="new_id" lay-verify="required" style="width:360px;" id="select">
              <% category.forEach((item)=>{%>

                <option value="<%= item.new_id%>"><%= item.new_name %></option>
              <%})%>              
            </select>
          </div>
        </div>
        <div class="layui-form-item">
          <div class="layui-form-item">
            <label class="layui-form-label">发布时间</label>
            <input type="text" class="layui-input wang olddate" id="test1" autocomplete="off" required name="news_date" >
          </div>
        </div>
        
        <div class="layui-form-item">
          <label class="layui-form-label"></label>
          <blockquote class="layui-elem-quote" style="margin-left:110px;">预览图
            <div>
              <img src="" alt="" class="themb" width="150" id="oldthumbimg">
              <!-- 新图片地址 -->
              <input type="hidden" name="news_pic" class="newpic">
              <!-- 旧图片地址 -->
              <input type="hidden" name="oldnews_pic" class="oldpic">
            </div>
          </blockquote>
        </div>
        <div class="layui-form-item">
          <button type="button" class="layui-btn" id="uploadImg" style="margin-left:110px;">
            <i class="layui-icon">&#xe67c;</i>修改图片
          </button>
        </div>
  
        <!-- 多图 -->
        <div class="layui-form-item">
          <label class="layui-form-label"></label>
          <button type="button" class="layui-btn" id="myimg" style=" width:150px;">
              <i class="layui-icon">&#xe67c;</i>多图上传</button>           
            <div class="test">
              <img src="" alt="" class="themb" width="150" id="old_news_img" style="margin-left:110px;">
              <!-- 新图片地址 -->
              <input type="hidden" name="new_news_img" class="new_news_img">
              <!-- 旧图片地址 -->
              <input type="hidden" name="old_news_img" class="old_news_img">
            </div>
        </div>
   

        <div class="layui-form-item layui-form-text">
          <label class="layui-form-label">新闻内容</label>
          <div class="layui-input-block">
            <textarea name="news_content" placeholder="请输入新闻内容" class="layui-textarea oldcontent"></textarea>
          </div>
        </div>
        <div class="layui-form-item">
          <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="updateform">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
          </div>
        </div>
      </form>
    </div>
    <!-- 删除的外层 -->
    <!-- <table id ="demo" lay-filter="test"></table> -->
</body>

</html>
<script src="/admin/lib/echarts.min.js"></script>
<script src="/admin/lib/layui/layui.js"></script>
 <!-- layui表单事件 -->
<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
    <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
    <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
  </div>
</script>
<!-- 删改功能 -->
<script type="text/html" id="titleTp1">
  <div>
    <button type="button" class="layui-btn layui-btn-sm   layui-btn-danger" onclick="deleteBox('{{d.news_id}}')" style="margin-right:5px; margin-top:10px;"><i class="layui-icon"></i></button>
    <button type="button" class="layui-btn layui-btn-sm " onclick="uploadBox('{{d.news_id}}')" style="margin-top:10px; margin-right:5px ;"><i class="layui-icon"></i></button>
    <button type="button" class="layui-btn layui-btn-normal layui-btn-sm" lay-event="read" style="margin-top:10px;"><i class="layui-icon"></i></button>
  </div>
</script>
<!-- 表格图片渲染 -->
<script type="text/html" id="titleTp2">
  <div>
    <span onclick="fn('{{d.news_id}}','{{d.is_show?0:1}}')" class="layui-btn layui-btn-sm {{d.is_show?'':'layui-btn-danger'}}" style="margin-top:10px;">{{d.is_show?"已启用":"未启用"}}</span>
   </div>
</script>
<script type="text/html" id="titleTp3">
  <div id="list" onclick="imag('{{d.news_img}}')"> 

  </div>
</script>
<script>

  // 修改按钮uploadBox使其表格内容渲染到弹出层
  function uploadBox(id,pic) {
    $.ajax({
      type: 'get',
      url: `/admin/news/newsindex/upluad?id=${id}`,
      dataType: 'json',
      success: (res) => {
        if (res.code == 1) {
          var index = layer.open({
            type: 1,
            title: '修改新闻内容',
            content: $('#uploadBox')
          })
          var data = res.data;
          $("#oldthumbimg").attr('src',data.news_pic);   
          $(".oldid").val(data.news_id);
          $(".oldname").val(data.news_name);
          $(".oldtitle").val(data.news_title);
          $(".oldpic").val(data.news_pic);
          $("#old_news_img").attr('src',data.news_img);
          // $("<img width='150'>").attr('src',data.news_img).appendTo($(".oldduotu"));
          $(".oldcontent").val(data.news_content)
          $(".olddate").val(data.news_date); 
          // $("[name=new_name]").val(data.new_name)     
          // $("#wc").val(data.new_name)
          // form表单上传数据上传
        


        }
      }
    })
  }
 
 

  // 删除按钮deleteBox
  function deleteBox(id) {
    var index = layer.open({
      title: '删除信息',
      content: '这么热点的新闻居然想把我删除掉，我怀疑有人给你递黑钱了',
      icon: 2,
      shade: [0.8, '#d51919'],
      btn: ['确定', '取消']
      , yes: function (index, layero) {
        $.ajax({
          type: 'GET',
          url: `/admin/news/newsindex/delete?id=${id}`,
          dataType: 'JSON',
          success: (res) => {
            console.log(res)
            if (res.code == 1) {
              tableIns.reload();

            }
            layer.msg(res.msg);
            layer.close(index);
          }
        })
      }
    })
  }

  // 是否展示行文 is_show
  function fn(id, show) {
    $.ajax({
      type: 'get',
      url: `/admin/news/newsindex/show?id=${id}&show=${show}`,
      success: (res) => {
        if (res.code == 1) {
          tableIns.reload();
        }
      }
    })

  }


  layui.use(['table', 'element', 'jquery', 'form', 'layer', 'laydate', 'upload'], function () {
    var { table, element, laydate } = layui;
    layer = layui.layer,
      $ = layui.$;
    form = layui.form;
    upload = layui.upload;
    tableIns = layui.tableIns;
    // 新闻内容修改渲染表格
    layer.open({
      type: 1,
      title: '欢迎进入新闻模块，管理员'
      , content: '小超在线为您服务!'
      , time: '5000'
      , anim: 1
      , skin: 'skintest'
    });

    tableIns = table.render({
      elem: '#news',
      url: '/admin/news/newsindex/query',
      page: true,
      toolbar: '#toolbarDemo',
      cols: [[
        { type: 'checkbox', fixed: 'left' },
        { field: 'news_id', title: 'ID', sort: true, fixed: 'left' },
        { field: 'news_name', title: '新闻名字', },
        { field: 'news_title', title: '新闻标题', },
        { field: 'new_name' ,title:'新闻模块'},
        { field: 'news_date', title: '新闻发布时间', },
        { field: 'news_content', title: '新闻内容', },
        {
          field: 'news_pic', title: '热点图片', templet: function (d) {
            return `<div>
                    <img width=82 src="${d.news_pic}" alt="">
                  </div`
          }
        },
        // { field: 'news_img', title: '热点组图',templet:function(d ){
        //   return `<div><img width=50 src="${d.news_img}"></div>`
        // }},
        { field: 'is_show', title: '是否展示', templet: '#titleTp2' },
        { field: '', title: '操作', width: 250, templet: '#titleTp1' },
      ]]
      , autoSort: true
      , unresize: true
    });
    table.on('toolbar(test)', function(obj){
    var checkStatus = table.checkStatus(obj.config.id);
    switch(obj.event){
      case 'getCheckData':
        var data = checkStatus.data;
        layer.alert(JSON.stringify(data));
      break;
      case 'getCheckLength':
        var data = checkStatus.data;
        layer.msg('选中了：'+ data.length + ' 个');
      break;
      case 'isAll':
        layer.msg(checkStatus.isAll ? '全选': '未全选')
      break;
    };
  });
    // 查看按钮
   table.on("tool(test)",function(obj){
    console.log(obj.data)
      console.log(obj)
      switch(obj.event){
        case 'read':
          location.href = `/admin/news/newsindex/listf?id=${obj.data.news_id}`
          break;
      }
    })  
    laydate.render({
      elem: '#test1',
      trigger: 'click',
      type: 'datetime',
      format: 'y/MM/dd-HH:mm:ss',
      min: -7,
      max: 7
    });

    //新闻上传功能 上传缩略图 导航栏最右边
    upload.render({
      elem: '#themb',
      url: '/admin/news/newsindex/upload',
      accept:"images",
      acceptMime:"image/*",
      size:500,
      // multiple: true,
      done: (res) => {
        // 上传完毕后的返回
        if (res.code == 0) {
          // $(".thumb").attr("src",res.url);
          // $("[name=news_pic]").val(res.url);
          // themb.src = res.url
          $(".themb").attr("src", res.url);
          // console.log($(".gthemb").val(res.url))  
          $(".gthemb").val(res.url)
        } else {
          layer.msg("图片上传失败")
        }
      }
    });


    // 新闻上传模块 多图上传
    // var imgList = document.querySelector(".imgList")
    // 创建隐藏标签
    var pthumbList = [];
    upload.render({
      elem:"#pthemb",
      url:"/admin/news/newsindex/upload",
      multiple:true,
      accept:"images",
      acceptMime:"image/*",
      size:500,
      number:4,
      done:(res)=>{
        // 动态生成元素
        if(res.code==0){
        // var elem = document.createElement("img")
        // elem.src = res.url;
        // elem.style.width="150px "
        // imgList.appendChild(elem);
        $("<img width='150'>").attr("src",res.url).appendTo($(".imgList"));
        pthumbList.push(res.url);
        //  console.log(pthumbList.join())    //在这里我写入join()变字符串跟写入 join(",")相等
        $("[name=news_img]").val(pthumbList.join());
      }
    }
    })

    // 修改后多图上传
    var image = [];
    upload.render({
      elem:"#myimg",
      url:"/admin/news/newsindex/upload",
      multiple:true,
      accept:"images",
      acceptMime:"image/*",
      size:500,
      number:4,
      done:(res)=>{
        if(res.code==0){
          $("<img width='150>").attr("src",res.url).appendTo($(".imgtest"));
          image.push(res.url);
          $(".new_news_img").val(image.join());
        }
      }
    })

    // 修改后的缩略图上传
   
    upload.render({
      elem:"#uploadImg",
      url:"/admin/news/newsindex/upload",
      accept:"images",
      acceptMime:"image/*",
      size:500,
      done:(res)=>{
        if(res.code==0){
          $("#oldthumbimg").attr('src',res.url);
  
          $(".new_news_pic").val(res.url);
        }else{
          lay.msg("图片上传失败");
        }
      }
    })

    // form添加表单提交
    form.on("submit(formthemb)", function (data) {
      console.log(data.field);
      $.ajax({
        type: "POST",
        url: "/admin/news/newsindex/insert",
        data: data.field,
        dataType: "json",
        success: (res) => {
          console.log(res);
          if (res.code == 1) {
            layer.open({
              tilte: "上传新闻情况",
              content: res.msg,
              skin: "demo-class",
              
            })
            
          } else {
            layer.open({
              tilte: "上传新闻情况",
              content: res.msg,
              skin: "demo-class"
            })

          }
          tableIns.reload();
        }
      })
      return false;
    });
    // 修改后提交上传
    form.on("submit(updateform)",data=>{

            $.ajax({
              type:"post",
              url:`/admin/news/newsindex/update`,            
              data:data.field,
              dataType:"json",
              success:(res)=>{
                console.log(res)
                if(res.code==1){
                  layer.open({
                    title:'修改信息',
                    content:res.msg,
                    icon :1
                  })
                  tableIns.reload();
                  // layer.close(index);
                }else{
                  layer.open({
                  title: '项目添加信息',
                  content: '失败',
                   icon: 2
              })
                }
            }
            })
            return false;
          })

  })
</script>
